<!-- 友链页面 - 展示友链列表，支持搜索筛选、分类筛选和友链申请功能 -->
<template>
    <div class="friends-page">
        <!-- 统一导航栏组件 -->
        <AppHeader />

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="content-wrapper">
                <!-- 欢迎区域 - 介绍友链交换功能 -->
                <div class="welcome-section">
                    <div class="welcome-icon">
                        <el-icon>
                            <Link />
                        </el-icon>
                    </div>
                    <h1 class="welcome-title">🤝 友链交换</h1>
                    <p class="welcome-subtitle">在这里，我们相互连接</p>
                    <p class="welcome-description">分享技术，交流心得，共同成长</p>
                    <div class="welcome-actions">
                        <button class="action-btn primary" @click="showApplyForm = true">
                            申请友链
                        </button>
                        <button class="action-btn secondary" @click="showGuidelines = true">
                            查看友链规范
                        </button>
                    </div>
                </div>

                <!-- 筛选和搜索区域 - 提供搜索和分类筛选功能 -->
                <div class="filter-section">
                    <!-- 搜索框 -->
                    <div class="search-box">
                        <el-input v-model="searchQuery" placeholder="搜索友链..." class="search-input" clearable>
                            <template #prefix>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </template>
                        </el-input>
                    </div>
                    <!-- 分类筛选标签 -->
                    <div class="filter-tabs">
                        <button v-for="category in categories" :key="category.value" class="filter-tab"
                            :class="{ active: selectedCategory === category.value }"
                            @click="selectedCategory = category.value">
                            {{ category.label }}
                        </button>
                    </div>
                </div>

                <!-- 友链网格区域 - 展示友链卡片列表 -->
                <div class="friends-grid">
                    <!-- 友链卡片，循环渲染当前页的友链 -->
                    <div v-for="friend in paginatedFriends" :key="friend.id" class="friend-card"
                        @click="openFriendLink(friend.url)">
                        <!-- 友链卡片头部 - 包含Logo和名称 -->
                        <div class="friend-header">
                            <div class="friend-logo">
                                <img v-if="friend.logo" :src="friend.logo" :alt="friend.name"
                                    @error="handleImageError" />
                                <div v-else class="logo-placeholder">
                                    <el-icon>
                                        <Link />
                                    </el-icon>
                                </div>
                            </div>
                            <h3 class="friend-name">{{ friend.name }}</h3>
                        </div>

                        <!-- 友链卡片内容 - 包含链接、描述和标签 -->
                        <div class="friend-content">
                            <div class="friend-link">
                                <el-icon>
                                    <Link />
                                </el-icon>
                                <span>{{ friend.url }}</span>
                            </div>

                            <p class="friend-description">{{ friend.description }}</p>

                            <!-- 友链标签列表 -->
                            <div class="friend-tags">
                                <span v-for="tag in friend.tags" :key="tag" class="friend-tag">
                                    {{ tag }}
                                </span>
                            </div>
                        </div>

                        <!-- 友链卡片底部 - 包含分类和状态 -->
                        <div class="friend-footer">
                            <span class="friend-category">{{ friend.category }}</span>
                            <span class="friend-status" :class="friend.status">
                                {{ friend.status === 'active' ? '活跃' : '待审核' }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- 分页区域 - 显示分页控件 -->
                <div class="pagination-section">
                    <el-pagination v-model:current-page="currentPage" :page-size="pageSize"
                        :total="filteredFriends.length" layout="prev, pager, next, total"
                        @current-change="handlePageChange" />
                </div>

                <!-- 空状态 - 当没有友链或搜索结果为空时显示 -->
                <div v-if="paginatedFriends.length === 0" class="empty-state">
                    <div class="empty-icon">
                        <el-icon>
                            <Link />
                        </el-icon>
                    </div>
                    <h3 class="empty-title">暂无友链</h3>
                    <p class="empty-description">
                        {{ searchQuery ? '没有找到匹配的友链' : '快来申请成为友链吧！' }}
                    </p>
                </div>
            </div>
        </main>

        <!-- 统一页脚组件 -->
        <AppFooter />

        <!-- 申请友链对话框 - 友链申请表单 -->
        <el-dialog v-model="showApplyForm" title="申请友链" width="500px" class="apply-dialog">
            <div class="apply-form">
                <el-form :model="applyForm" :rules="applyRules" ref="applyFormRef">
                    <!-- 网站图标选择 -->
                    <el-form-item label="网站logo" prop="logo">
                        <el-input v-model="applyForm.logo" placeholder="请输入您的网站logo链接" class="form-input" />
                        <div class="logo-tip">
                            <el-icon>
                                <InfoFilled />
                            </el-icon>
                            <span>请输入一个图片链接作为您的网站logo</span>
                        </div>
                    </el-form-item>

                    <!-- 网站名称输入框 -->
                    <el-form-item label="网站名称" prop="name">
                        <el-input v-model="applyForm.name" placeholder="请输入您的网站名称" class="form-input" />
                    </el-form-item>

                    <!-- 网站链接输入框 -->
                    <el-form-item label="网站链接" prop="url">
                        <el-input v-model="applyForm.url" placeholder="请输入您的网站链接" class="form-input" />
                    </el-form-item>

                    <!-- 网站介绍文本域 -->
                    <el-form-item label="网站介绍" prop="description">
                        <el-input v-model="applyForm.description" type="textarea" :rows="3" placeholder="请简要介绍您的网站"
                            class="form-input" />
                    </el-form-item>

                    <!-- 技术标签选择器 -->
                    <el-form-item label="技术标签" prop="tags">
                        <el-select v-model="applyForm.tags" multiple filterable allow-create default-first-option
                            placeholder="请选择或输入技术标签" style="width: 100%" @change="handleTagsChange" class="form-input">
                            <el-option v-for="tag in availableTags" :key="tag" :label="tag" :value="tag" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 对话框底部按钮 -->
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showApplyForm = false">取消</el-button>
                    <el-button type="primary" @click="submitApply">提交申请</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 友链规范对话框 - 显示友链申请规范和要求 -->
        <el-dialog v-model="showGuidelines" title="友链申请规范" width="600px" class="guidelines-dialog">
            <div class="guidelines-content">
                <!-- 申请条件 -->
                <h4>申请条件：</h4>
                <ul>
                    <li>网站内容健康，无违法信息</li>
                    <li>网站稳定运行，访问速度良好</li>
                    <li>内容原创，有独特价值</li>
                    <li>技术相关或生活分享类网站</li>
                </ul>

                <!-- 申请流程 -->
                <h4>申请流程：</h4>
                <ol>
                    <li>填写申请表单，提供网站信息</li>
                    <li>等待审核，通常1-3个工作日</li>
                    <li>审核通过后，我们会主动添加您的友链</li>
                    <li>请在您的网站上也添加我们的友链</li>
                </ol>

                <!-- 我们的友链信息 -->
                <h4>友链信息：</h4>
                <div class="our-info">
                    <p><strong>网站名称：</strong>零の守墓人的博客</p>
                    <p><strong>网站链接：</strong>https://example.com</p>
                    <p><strong>网站描述：</strong>主要记录自己日常开发和生活中碰到的问题和感想</p>
                </div>
            </div>
        </el-dialog>

        <!-- 统一页脚组件 -->
        <!-- <AppFooter /> -->
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

// Vue 3 组合式 API - 提供响应式数据、计算属性和生命周期钩子
import { ref, computed, onMounted } from 'vue'

// Element Plus 图标组件 - 用于界面图标显示
import {
    Link,        // 链接图标，用于友链相关功能
    Search,      // 搜索图标，用于搜索框
    InfoFilled,  // 信息图标，用于提示信息
    Picture      // 图片图标，用于网站logo提示
} from '@element-plus/icons-vue'

// Element Plus 组件 - 用于消息提示
import { ElMessage } from 'element-plus'

// API工具函数导入
import { get, post } from '../utils/api'
import { API_PATHS } from '../constants/api'

// 自定义组件导入
import AppHeader from '../components/AppHeader.vue'  // 统一导航栏组件
import AppFooter from '../components/AppFooter.vue'  // 统一页脚组件

// ==================== 类型定义 ====================

/**
 * 友链数据类型定义
 */
interface Friend {
    id: string
    name: string
    url: string
    description: string
    logo?: string
    tags: string[]
    category: string
    status: 'active' | 'pending'
}

/**
 * 友链申请数据类型定义
 */
interface FriendApplication {
    name: string
    url: string
    description: string
    tags: string[]
    logo: string  // 改为logo字段，存储图片链接
}

// ==================== 响应式数据 ====================

/**
 * 搜索查询关键词
 * @description 用户输入的搜索关键词，用于筛选友链
 */
const searchQuery = ref('')

/**
 * 选中的分类
 * @description 当前选中的友链分类，用于分类筛选
 */
const selectedCategory = ref('all')

/**
 * 当前页码
 * @description 分页的当前页码，用于分页显示
 */
const currentPage = ref(1)

/**
 * 每页显示数量
 * @description 分页每页显示的友链数量
 */
const pageSize = ref(6)

/**
 * 显示申请表单对话框
 * @description 控制申请友链对话框的显示状态
 */
const showApplyForm = ref(false)

/**
 * 显示友链规范对话框
 * @description 控制友链规范对话框的显示状态
 */
const showGuidelines = ref(false)

/**
 * 申请表单引用
 * @description 用于访问申请表单实例，进行验证和重置操作
 */
const applyFormRef = ref()

/**
 * 申请表单数据
 * @description 友链申请表单的数据对象，包含网站信息
 */
const applyForm = ref<{
    name: string;        // 网站名称
    url: string;         // 网站链接
    description: string; // 网站描述
    tags: string[];      // 技术标签
    logo: string;        // 网站logo链接
}>({
    name: '',
    url: '',
    description: '',
    tags: [],
    logo: ''
})

/**
 * 可用技术标签
 * @description 可选的技术标签列表，支持用户选择和自定义输入
 */
const availableTags = ref([
    // 前端技术标签
    'Vue.js', 'React', 'Angular', 'TypeScript', 'JavaScript', 'HTML5', 'CSS3', 'Sass', 'Less',
    'Webpack', 'Vite', 'Babel', 'ES6+', 'PWA', '微前端', '前端工程化',

    // 后端技术标签
    'Node.js', 'Python', 'Java', 'Go', 'Rust', 'C#', 'PHP', 'Ruby', 'Scala',
    'Spring Boot', 'Django', 'Flask', 'Express', 'FastAPI', 'Gin',

    // 数据库技术标签
    'MySQL', 'PostgreSQL', 'MongoDB', 'Redis', 'Elasticsearch', 'SQLite', 'Oracle',

    // 云计算和DevOps标签
    'Docker', 'Kubernetes', 'AWS', 'Azure', 'GCP', '阿里云', '腾讯云',
    'CI/CD', 'Jenkins', 'GitLab', 'GitHub Actions', 'Terraform',

    // 移动端技术标签
    'React Native', 'Flutter', 'Ionic', 'Cordova', 'uni-app', '微信小程序',

    // AI和机器学习标签
    'AI', '机器学习', '深度学习', 'TensorFlow', 'PyTorch', 'Scikit-learn',
    '计算机视觉', '自然语言处理', '推荐系统',

    // 其他技术标签
    '区块链', '物联网', '大数据', '微服务', 'Serverless', 'GraphQL',
    'RESTful API', 'WebSocket', '消息队列', '缓存', '负载均衡',

    // 通用分类标签
    '前端', '后端', '全栈', '移动端', '小程序', '架构师', '技术分享',
    '开源项目', '性能优化', '安全', '测试', '运维'
])

/**
 * 加载状态
 * @description 控制友链数据加载状态
 */
const isLoading = ref(false)

/**
 * 错误信息
 * @description 存储API调用失败时的错误信息
 */
const errorMessage = ref('')

/**
 * 友链数据列表
 * @description 友链列表数据，包含友链的基本信息和状态
 */
const friends = ref<Friend[]>([
    {
        id: '1',
        name: '技术博客A',
        url: 'https://blog-a.com',
        description: '专注于前端技术分享，Vue.js专家，定期分享Vue3、TypeScript等前沿技术文章。',
        logo: '/src/assets/friend-logo-1.png',
        tags: ['Vue.js', '前端', '技术分享'],
        category: 'tech',
        status: 'active'
    },
    {
        id: '2',
        name: '个人博客B',
        url: 'https://blog-b.com',
        description: '记录个人学习笔记和生活感悟，涵盖前端开发、读书笔记、生活随笔等内容。',
        logo: '/src/assets/friend-logo-2.png',
        tags: ['前端', '生活', '读书'],
        category: 'personal',
        status: 'active'
    },
    {
        id: '3',
        name: '工具网站C',
        url: 'https://tools-c.com',
        description: '提供各种实用的开发工具，包括代码生成器、在线调试工具、格式转换等。',
        logo: '/src/assets/friend-logo-3.png',
        tags: ['工具', '开发', '效率'],
        category: 'tools',
        status: 'active'
    },
    {
        id: '4',
        name: '学习资源D',
        url: 'https://learning-d.com',
        description: '收集整理优质的学习资源，包括教程、文档、视频课程等，助力开发者成长。',
        logo: '/src/assets/friend-logo-4.png',
        tags: ['学习', '教程', '资源'],
        category: 'learning',
        status: 'active'
    },
    {
        id: '5',
        name: '技术博客E',
        url: 'https://blog-e.com',
        description: '深入探讨后端技术，包括Java、Spring Boot、微服务架构等企业级开发技术。',
        logo: '/src/assets/friend-logo-5.png',
        tags: ['Java', '后端', '微服务'],
        category: 'tech',
        status: 'active'
    },
    {
        id: '6',
        name: '个人博客F',
        url: 'https://blog-f.com',
        description: '分享React生态系统的使用经验，包括Hooks、Redux、Next.js等技术的实践。',
        logo: '/src/assets/friend-logo-6.png',
        tags: ['React', '前端', '实践'],
        category: 'personal',
        status: 'active'
    },
    {
        id: '7',
        name: '工具网站G',
        url: 'https://tools-g.com',
        description: '专注于设计工具和资源，提供UI设计、图标制作、配色方案等实用工具。',
        logo: '/src/assets/friend-logo-7.png',
        tags: ['设计', 'UI', '工具'],
        category: 'tools',
        status: 'active'
    },
    {
        id: '8',
        name: '学习资源H',
        url: 'https://learning-h.com',
        description: '提供Python学习路径和实战项目，从基础语法到数据分析、机器学习。',
        logo: '/src/assets/friend-logo-8.png',
        tags: ['Python', '学习', 'AI'],
        category: 'learning',
        status: 'active'
    }
])

/**
 * 申请表单验证规则
 * @description 表单验证规则，确保用户输入的数据符合要求
 */
const applyRules = {
    name: [
        { required: true, message: '请输入网站名称', trigger: 'blur' },
        { min: 2, max: 20, message: '网站名称长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    url: [
        { required: true, message: '请输入网站链接', trigger: 'blur' },
        { type: 'url', message: '请输入正确的网站链接', trigger: 'blur' }
    ],
    description: [
        { required: true, message: '请输入网站介绍', trigger: 'blur' },
        { min: 10, max: 200, message: '网站介绍长度在 10 到 200 个字符', trigger: 'blur' }
    ],
    tags: [
        { required: true, message: '请选择技术标签', trigger: 'change' }
    ],
    logo: [
        { required: true, message: '请输入网站logo链接', trigger: 'blur' },
        { type: 'url', message: '请输入正确的图片链接', trigger: 'blur' }
    ]
}

/**
 * 分类选项数据
 * @description 友链分类选项，用于分类筛选功能
 */
const categories = ref([
    { label: '全部', value: 'all' },
    { label: '技术博客', value: 'tech' },
    { label: '个人博客', value: 'personal' },
    { label: '工具网站', value: 'tools' },
    { label: '学习资源', value: 'learning' }
])

// ==================== 计算属性 ====================

/**
 * 过滤后的友链列表
 * @description 根据搜索关键词和分类筛选后的友链列表
 * @returns 筛选后的友链数组
 */
const filteredFriends = computed(() => {
    let result = friends.value

    // 按分类过滤
    if (selectedCategory.value !== 'all') {
        result = result.filter(friend => friend.category === selectedCategory.value)
    }

    // 按搜索关键词过滤
    if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(friend =>
            friend.name.toLowerCase().includes(query) ||
            friend.description.toLowerCase().includes(query) ||
            friend.tags.some(tag => tag.toLowerCase().includes(query))
        )
    }

    return result
})

/**
 * 分页后的友链列表
 * @description 当前页显示的友链列表，用于分页显示
 * @returns 当前页的友链数组
 */
const paginatedFriends = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return filteredFriends.value.slice(start, end)
})

/**
 * 总页数
 * @description 根据筛选后的友链数量和每页显示数量计算总页数
 * @returns 总页数
 */
const totalPages = computed(() => {
    return Math.ceil(filteredFriends.value.length / pageSize.value)
})

// ==================== API调用函数 ====================

/**
 * 获取友链列表
 * @description 从后端API获取友链列表数据
 */
const fetchFriends = async () => {
    try {
        // 设置加载状态
        isLoading.value = true
        errorMessage.value = ''

        // 调用API获取友链列表
        const response = await get<{ friends: Friend[] }>(API_PATHS.FRIENDS.LIST, {
            withAuth: false, // 友链列表不需要认证
            timeout: 8000,   // 8秒超时
            retry: 2         // 失败重试2次
        })

        if (response.success && response.data) {
            // 成功获取数据
            friends.value = response.data.friends || []
            console.log('成功获取友链列表:', response.data)
        } else {
            // API返回错误
            errorMessage.value = response.error || '获取友链列表失败'
            console.error('获取友链列表失败:', response.error)

            // 显示错误提示
            ElMessage.error(errorMessage.value)

            // 使用默认数据
            friends.value = [
                {
                    id: '1',
                    name: '技术博客A',
                    url: 'https://blog-a.com',
                    description: '专注于前端技术分享，Vue.js专家，定期分享Vue3、TypeScript等前沿技术文章。',
                    logo: '/src/assets/friend-logo-1.png',
                    tags: ['Vue.js', '前端', '技术分享'],
                    category: 'tech',
                    status: 'active'
                },
                {
                    id: '2',
                    name: '个人博客B',
                    url: 'https://blog-b.com',
                    description: '记录个人学习笔记和生活感悟，涵盖前端开发、读书笔记、生活随笔等内容。',
                    logo: '/src/assets/friend-logo-2.png',
                    tags: ['前端', '生活', '读书'],
                    category: 'personal',
                    status: 'active'
                },
                {
                    id: '3',
                    name: '工具网站C',
                    url: 'https://tools-c.com',
                    description: '提供各种实用的开发工具，包括代码生成器、在线调试工具、格式转换等。',
                    logo: '/src/assets/friend-logo-3.png',
                    tags: ['工具', '开发', '效率'],
                    category: 'tools',
                    status: 'active'
                },
                {
                    id: '4',
                    name: '学习资源D',
                    url: 'https://learning-d.com',
                    description: '收集整理优质的学习资源，包括教程、文档、视频课程等，助力开发者成长。',
                    logo: '/src/assets/friend-logo-4.png',
                    tags: ['学习', '教程', '资源'],
                    category: 'learning',
                    status: 'active'
                },
                {
                    id: '5',
                    name: '技术博客E',
                    url: 'https://blog-e.com',
                    description: '深入探讨后端技术，包括Java、Spring Boot、微服务架构等企业级开发技术。',
                    logo: '/src/assets/friend-logo-5.png',
                    tags: ['Java', '后端', '微服务'],
                    category: 'tech',
                    status: 'active'
                },
                {
                    id: '6',
                    name: '个人博客F',
                    url: 'https://blog-f.com',
                    description: '分享React生态系统的使用经验，包括Hooks、Redux、Next.js等技术的实践。',
                    logo: '/src/assets/friend-logo-6.png',
                    tags: ['React', '前端', '实践'],
                    category: 'personal',
                    status: 'active'
                },
                {
                    id: '7',
                    name: '工具网站G',
                    url: 'https://tools-g.com',
                    description: '专注于设计工具和资源，提供UI设计、图标制作、配色方案等实用工具。',
                    logo: '/src/assets/friend-logo-7.png',
                    tags: ['设计', 'UI', '工具'],
                    category: 'tools',
                    status: 'active'
                },
                {
                    id: '8',
                    name: '学习资源H',
                    url: 'https://learning-h.com',
                    description: '提供Python学习路径和实战项目，从基础语法到数据分析、机器学习。',
                    logo: '/src/assets/friend-logo-8.png',
                    tags: ['Python', '学习', 'AI'],
                    category: 'learning',
                    status: 'active'
                }
            ]
        }
    } catch (error) {
        // 网络错误或其他异常
        errorMessage.value = error instanceof Error ? error.message : '网络请求失败'
        console.error('获取友链列表异常:', error)

        // 显示错误提示
        ElMessage.error('网络连接失败，请检查网络后重试')

        // 使用默认数据
        friends.value = [
            {
                id: '1',
                name: '技术博客A',
                url: 'https://blog-a.com',
                description: '专注于前端技术分享，Vue.js专家，定期分享Vue3、TypeScript等前沿技术文章。',
                logo: '/src/assets/friend-logo-1.png',
                tags: ['Vue.js', '前端', '技术分享'],
                category: 'tech',
                status: 'active'
            },
            {
                id: '2',
                name: '个人博客B',
                url: 'https://blog-b.com',
                description: '记录个人学习笔记和生活感悟，涵盖前端开发、读书笔记、生活随笔等内容。',
                logo: '/src/assets/friend-logo-2.png',
                tags: ['前端', '生活', '读书'],
                category: 'personal',
                status: 'active'
            },
            {
                id: '3',
                name: '工具网站C',
                url: 'https://tools-c.com',
                description: '提供各种实用的开发工具，包括代码生成器、在线调试工具、格式转换等。',
                logo: '/src/assets/friend-logo-3.png',
                tags: ['工具', '开发', '效率'],
                category: 'tools',
                status: 'active'
            },
            {
                id: '4',
                name: '学习资源D',
                url: 'https://learning-d.com',
                description: '收集整理优质的学习资源，包括教程、文档、视频课程等，助力开发者成长。',
                logo: '/src/assets/friend-logo-4.png',
                tags: ['学习', '教程', '资源'],
                category: 'learning',
                status: 'active'
            },
            {
                id: '5',
                name: '技术博客E',
                url: 'https://blog-e.com',
                description: '深入探讨后端技术，包括Java、Spring Boot、微服务架构等企业级开发技术。',
                logo: '/src/assets/friend-logo-5.png',
                tags: ['Java', '后端', '微服务'],
                category: 'tech',
                status: 'active'
            },
            {
                id: '6',
                name: '个人博客F',
                url: 'https://blog-f.com',
                description: '分享React生态系统的使用经验，包括Hooks、Redux、Next.js等技术的实践。',
                logo: '/src/assets/friend-logo-6.png',
                tags: ['React', '前端', '实践'],
                category: 'personal',
                status: 'active'
            },
            {
                id: '7',
                name: '工具网站G',
                url: 'https://tools-g.com',
                description: '专注于设计工具和资源，提供UI设计、图标制作、配色方案等实用工具。',
                logo: '/src/assets/friend-logo-7.png',
                tags: ['设计', 'UI', '工具'],
                category: 'tools',
                status: 'active'
            },
            {
                id: '8',
                name: '学习资源H',
                url: 'https://learning-h.com',
                description: '提供Python学习路径和实战项目，从基础语法到数据分析、机器学习。',
                logo: '/src/assets/friend-logo-8.png',
                tags: ['Python', '学习', 'AI'],
                category: 'learning',
                status: 'active'
            }
        ]

        // 如果是开发环境，显示详细错误信息
        if (import.meta.env.DEV) {
            console.error('详细错误信息:', error)
        }
    } finally {
        // 无论成功还是失败，都要清除加载状态
        isLoading.value = false
    }
}

// ==================== 方法函数 ====================

/**
 * 打开友链网站
 * @param url 友链网站地址
 * @description 在新窗口中打开友链网站，使用安全的方式打开外部链接
 */
const openFriendLink = (url: string) => {
    window.open(url, '_blank', 'noopener,noreferrer')
}

/**
 * 处理图片加载错误
 * @description 当友链Logo加载失败时，隐藏图片并显示占位符
 */
const handleImageError = (event: Event) => {
    const img = event.target as HTMLImageElement
    img.style.display = 'none'
    img.nextElementSibling?.classList.remove('hidden')
}

/**
 * 处理页码变化
 * @param page 新的页码
 * @description 分页页码变化时，更新当前页码并滚动到页面顶部
 */
const handlePageChange = (page: number) => {
    currentPage.value = page
    // 滚动到页面顶部，提供更好的用户体验
    window.scrollTo({ top: 0, behavior: 'smooth' })
}

/**
 * 处理标签变化
 * @param value 选中的标签值数组
 * @description 处理技术标签的选择和自定义输入，过滤空值和重复值
 */
const handleTagsChange = (value: string[]) => {
    // 过滤掉空值和重复值
    const filteredTags = value.filter(tag => tag && tag.trim() !== '')
    applyForm.value.tags = [...new Set(filteredTags)]

    // 如果添加了新的自定义标签，可以在这里进行额外处理
    const newCustomTags = filteredTags.filter(tag => !availableTags.value.includes(tag))
    if (newCustomTags.length > 0) {
        console.log('新增自定义标签:', newCustomTags)
    }
}

/**
 * 提交友链申请
 * @description 提交友链申请表单，包括表单验证和API调用
 */
const submitApply = async () => {
    try {
        // 检查表单引用是否存在
        if (!applyFormRef.value) {
            console.warn('表单引用不存在')
            return
        }

        // 执行表单验证
        await applyFormRef.value.validate()

        // 调用后端API提交友链申请
        const response = await post<{ message: string }>(
            API_PATHS.FRIENDS.APPLY,
            {
                name: applyForm.value.name,
                url: applyForm.value.url,
                description: applyForm.value.description,
                tags: applyForm.value.tags,
                logo: applyForm.value.logo
            } as FriendApplication
        )

        // 检查API响应
        if (response.success) {
            // 显示成功消息
            ElMessage.success(response.data?.message || '申请提交成功！我们会尽快审核您的申请。')
            showApplyForm.value = false

            // 重置表单数据
            applyForm.value = {
                name: '',
                url: '',
                description: '',
                tags: [],
                logo: ''
            }
        } else {
            // 显示API返回的错误消息
            const errorMsg = response.error || '申请提交失败，请稍后重试'
            ElMessage.error(errorMsg)
            console.error('友链申请提交失败:', response.error)
        }
    } catch (error) {
        // 验证失败或提交失败时显示错误消息
        ElMessage.error('申请提交失败，请检查表单信息是否正确')
        console.error('友链申请提交异常:', error)

        // 如果是开发环境，显示详细错误信息
        if (import.meta.env.DEV) {
            console.error('详细错误信息:', error)
        }
    }
}

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载后的初始化
 * @description 初始化页面数据，可以在这里添加页面加载动画或其他初始化逻辑
 */
onMounted(() => {
    // 获取友链列表数据
    fetchFriends()
    console.log('Friends页面已加载')
})
</script>

<style scoped lang="scss">
// 导入友链页面组件样式
@use '../assets/styles/clients/_friends';
</style>